import {
    ClockCircleOutlined, EditOutlined, FrownOutlined, HomeOutlined, LeftOutlined, PlusCircleOutlined, RightOutlined, SmileOutlined, SyncOutlined
} from '@ant-design/icons';
import { Button, message, Popover, Spin } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import React from 'react';
import { Link } from 'react-router-dom';
import { FMT_YMD } from '../common/constant';
import http from '../common/http';
import MyMarkdown from "../common/MyMarkdown";

class NoteItemInfo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            noteId: 0,
            typeName: "",
            title: "",
            content: "",
            reviewList: []
        }
    }

    refChange = (noteId, status, reviewId) => {
        this.setState({ loading: true, noteId, status, reviewId })
        http.get("/api/note/note/find-one/" + noteId)
            .then(res => {
                this.setState({
                    loading: false,
                    noteId,
                    ...res.data
                }, () => {
                    var ele = document.getElementById("keyA")
                    ele.focus()
                })
            })
        http.get("/api/note/review/findList?noteId=" + noteId)
            .then(res => {
                this.setState({ reviewList: res.data })
            })
    }
    updateStatus = () => {
        if (this.state.status === 1)
            http.put("/api/note/review/update-to-reviewed/" + this.state.reviewId)
                .then(res => {
                    message.success(`标记【${this.state.title}】为已复习`, 1)
                    this.props.next()
                })
        if (this.state.status === 2) {
            this.props.next()
            // http.put("/api/note/review/update-to-not-reviewed/" + this.state.reviewId)
            //     .then(res => {
            //         message.success(`标记【${this.state.title}】为未复习`, 1)
            //         this.props.next()
            //     })
        }
    }

    findReviewList = () => {
        http.get("/api/note/review/findList?noteId=" + this.state.noteId)
            .then(res => {
                this.setState({ reviewList: res.data })
            })
    }
    resetReviewPlan = () => {
        http.post("/api/note/review/resetReviewPlan?noteId=" + this.state.noteId)
            .then(res => {
                message.success(`复习计划重置成功`, 1)
                this.setState({
                    reviewVisible: false,
                })
                this.findReviewList()
            })
    }
    handleVisibleChange = (visible) => {
        this.setState({ reviewVisible: visible });
    }

    keyUp = (e) => {
        e.stopPropagation()
        let code = e.keyCode
        if (code == 36) {           // Home-返回
            this.props.showList()
        } else if (code == 37) {    // 左键-上一个
            this.props.previous()
        } else if (code == 39) {    // 右键-下一个
            this.props.next()
        } else if (code == 32) {    // 空格-已(未)记住
            this.updateStatus()
        } else if (code == 13) {    // 回车-已(未)记住
            this.updateStatus()
        }
    }

    formatDate = (date) => {
        var ymd = moment(date).format(FMT_YMD)
        var week = moment(date).format("dddd")
        return ymd + " " + week.substring(2);
    }

    render() {
        const butStyle = { marginLeft: '10px' }
        const popContent = (
            <div>
                可使用 <b>快捷键</b> 进行操作： <br />
                <b>左键</b>：上一个 <br />
                <b>右键</b>：下一个 <br />
                <b>Home</b>：返回首页 <br />
                <b>回车</b> 或 <b>空格</b>：{this.state.status === 2 ? "未记住" : "已记住"} <br />
                <p />
                <Button style={butStyle} type="primary" onClick={this.props.previous} ><LeftOutlined />上一个</Button>
                <Button style={butStyle} type="primary" onClick={this.props.showList} ><HomeOutlined />首 页</Button>
                <Button style={butStyle} type="primary" onClick={this.props.next} >下一个<RightOutlined /></Button>
            </div>
        )
        const aCss = {
            color: "black",
            textDecoration: "none",
            cursor: "auto"
        }
        return (
            <div style={{ minWidth: 500 }}>
                <div style={{ minWidth: 300, maxWidth: 500, margin: "auto" }}>
                    <h4 style={{ marginBottom: 16 }} >
                        <Link to={{ pathname: '/note-edit', search: "noteId=" + this.state.noteId }} title="点击进行修改">
                            <b>【{this.state.typeName}】{this.state.title.trim()} </b> <EditOutlined />
                        </Link>
                        <Popover title="复习计划"
                            visible={this.state.reviewVisible}
                            onVisibleChange={this.handleVisibleChange}
                            content={
                                <div>
                                    <Button type="primary" onClick={this.resetReviewPlan}> <SyncOutlined /> 重置复习计划 </Button>
                                    <p />
                                    {
                                        this.state.reviewList.map(reviewObj => {
                                            return (
                                                <div key={reviewObj.id}>
                                                    第 {reviewObj.frequency} 次
                                                    （{this.formatDate(reviewObj.reviewDate)}）：{reviewObj.status == 1 ? "未复习" : "已复习"}
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            }>
                            <ClockCircleOutlined style={{ marginLeft: 10, color: '#08c' }} title="复习计划" />
                        </Popover>
                    </h4>
                    { // 加载中...
                        this.state.loading ? <Spin tip="加载中..." delay={50} /> : null
                    }
                    <MyMarkdown source={this.state.content} />
                </div>

                <a id="keyA" href="#!" onKeyUp={this.keyUp} style={aCss} >
                    <div style={{ textAlign: "center", marginTop: 20 }} >
                        <Button type="primary" onClick={this.updateStatus} >
                            {/* {this.state.status === 2 ? <FrownOutlined /> : <SmileOutlined />} */}
                            {this.state.status === 2 ? <SmileOutlined /> : <SmileOutlined />}
                            {/* {this.state.status === 2 ? "未记住" : "已记住"} */}
                            {this.state.status === 2 ? "下一个" : "下一项"}
                        </Button>
                        <Popover title="更多操作" content={popContent}>
                            <PlusCircleOutlined style={{ marginLeft: '10px' }} />
                        </Popover >
                    </div>
                </a>
            </div>
        );
    }
}

export default NoteItemInfo